<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.intro {
				background-color: #00FFFF;
			}

			#a {
				background-color: #0000FF;
			}

			* {
				background-color: #0D7114;
			}

			p {
				background-color: #D2691E;
			}

			h1,
			p {
				background-color: #FF0000;
			}

			div p {
				background-color: #00FFFF;
			}

			div>p {
				background-color: blanchedalmond;
			}

			div+p {
				color: #1F87CC;
			}

			a[target] {
				color: #FF0000;
			}

			a[target=_blank] {
				color: red;
			}
			
			[title~=film]{
				border: 5px solid yellow;
			}
			
			[lang|=en]{
				color: #FFFF00;
			}
			
			a:link{
				color: #FFFF00;
			}
			
			a:visited{
				color: #FFFF00;
			}
			
			a:active{
				color: #FFFF00;
			}
			
			a:hover{
				color: #FF0000;
			}
			
			input:focus{
				background-color: #FFFF00;
			}
			
			h2:first-letter{
				font-size: 300%;
				color: #D2691E;
			}
			
			h3:first-line{
				font-size: 200%;
				color: #00FFFF;
			}
			
			p:first-child{
				color: firebrick;
			}
			
			h4:before{
				content:" 台词";
			}
			
			h5:after{
				content: "台词";
			}
			
			h6:lang(en){
				color: mediumvioletred;
			}
			
			p~ul{
				background-color: #C71585;
			}
		</style>
	</head>
	<body>
		<!-- .class -->
		<div class="intro">
			<p>我是java63班学生</p>
		</div>

		<!-- #id -->
		<p id="a">我是java63班学生</p>

		<!-- * -->
		<p>我是java63班学生</p>

		<!-- element -->
		<p>我是java63班学生</p>

		<!-- element,element -->
		<h1>java</h1>
		<p>我是java63班学生</p>

		<!-- element element -->
		<div>
			<p>java63</p>
			<p>我是java63班学生</p>
		</div>

		<!-- element>element -->
		<div>
			<p>我是唐老鸭。</p>
			<p>我住在 Duckburg。</p>
		</div>
		<div>
			<span>
				<p>我的样式不会改变。</p>
			</span>
		</div>

		<!-- element+element -->
		<div>
			<p>我是唐老鸭。</p>
			<p>我住在 Duckburg。</p>
		</div>

		<p>我最好的朋友是米老鼠。</p>

		<p>我的样式不会改变。</p>

		<!-- [attribute] -->
		<p>带有 target 属性的链接会得到红色字体：</p>
		<a href="http://www.w3school.com.cn">w3c</a>
		<a href="http://www.disney.com" target="_blank">disney.com</a>
		<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>


		<!-- [attribute=value] -->
		<p>target="_blank" 的链接会得到红色字体：</p>
		<a href="http://www.w3school.com.cn">w3school.com.cn</a>
		<a href="http://www.disney.com" target="_blank">disney.com</a>


		<!-- [attribute~=value] -->
		<p>title 属性中包含单词 "film" 的图片会获得黄色边框。</p>
		<img src="images/1.jpg" title="film">
		
		
		<!-- [attribute|=value] -->
		<p lang="en">Hello</p>
		<p lang="zh">H1</p>
		
		 <!-- :link -->
		 <a href="http://www.w3school.com.cn">W3Sschool</a>
		 
		 <!-- :visited -->
		 <p>
		 <a href="http://www.w3school.com.cn">W3Sschool</a>
		 </p>
		 
		 <!-- :active -->
		 <p>
			<a href="http://www.w3school.com.cn">W3Sschool</a> 
		 </p>
		 
		 <!-- :hover -->
		 <p>
			<a href="http://www.w3school.com.cn">W3Sschool</a> 
		 </p>
		 
		 <!-- :focus -->
		 <p>在文本框中点击，会看到黄色的背景：</p>
		 <form>
		 	First name:<input type="text" name="firstname"/><br />
			Last name:<input type="text" name="lastname" />
		 </form>
		 
		 <!-- :first-letter -->
		 <h2>Welcome</h2>
		 
		 <!-- :first-line -->
		 <h3>WWF's Mission Statement</h3>
		 <p>To stop the degradation of the planet's</p>
		 
		 <!-- :first-child 这个需要在一个新的html中才能试出来-->
		 <p>这个段落是其父元素（body）的首个子元素。</p>
		 <h1>欢迎访问我的主页</h1>
		 <p>这个段落不是其父元素的首个子元素。</p>
		 
		 <!-- :before -->
		 <h4>我来自java63</h4>
		 
		 <!-- :after -->
		 <h5>我来自java63</h5>
		 
		 <!-- :lang -->
		 <h6 lang="en">I live in Duckburg.</h6>
		 
		 <!-- element1~element2 -->
		 <div>一个div</div>
		 <ul>
		 	<li>咖啡</li>
			<li>牛奶</li>
		 </ul>
		 <p>
			 <ul>
			 	<li>咖啡</li>
				<li>牛奶</li>
			 </ul>
		 </p>
	</body>
</html>
